<template>
    <div>
        <el-row>
            <el-col :span="24">
                <div class="top">
                    <el-input class="search" placeholder="输入姓名查询" v-model="searchInput"></el-input>
                    <el-button type="primary" @click="getAddData">新增</el-button>
                </div>
                <!-- 表格 -->
                <el-table :data="tableData" border>
                    <el-table-column type="selection">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="120">
                    </el-table-column>
                    <el-table-column prop="address" label="地址">
                    </el-table-column>
                    <el-table-column prop="date" label="出生日期">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                          <el-button
                              size="mini"
                              type="primary"
                              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                          <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination layout="prev,pager,next" :total="100" @current-change="hanleCurrentChange" 
                    ></el-pagination>
                </div>
            </el-col>
        </el-row>
        <!-- 新增 -->
        <el-dialog title="新增数据" :visible.sync="dialogAddForm">
            <el-form ref="form" :model="addForm" label-width="80px" size="mini">
                  <el-form-item label="姓名">
                    <el-input v-model="addForm.name"></el-input>
                  </el-form-item>
                  <el-form-item label="地址">
                <!-- expand-trigger次联级展开方式 -->
                <el-cascader expand-trigger="hover" placeholder="地址" :options="options" v-model="addForm.address" >
                </el-cascader>
              </el-form-item>
                  <el-form-item label="出生日期">
                      <el-date-picker type="date" placeholder="选择日期" v-model="addForm.date" style="width: 100%;"></el-date-picker>
                  </el-form-item>
                  <el-form-item size="large">
                    <el-button type="primary" @click="postAddDate">立即创建</el-button>
                  </el-form-item>
            </el-form>
        </el-dialog>
            <!-- 编辑 -->
            <!-- 对话框显示隐藏 -->
        <el-dialog title="修改个人信息" :visible.sync="dialogFormVisible" >
            <el-form ref="form" :model="editForm"  label-width="80px" size="mini">
                <el-form-item label="姓名" required>
                    <el-input v-model="editForm.name" ></el-input>
                </el-form-item>
                <el-form-item label="地址" required>
                    <el-input v-model="editForm.address"></el-input>
                </el-form-item>
                <el-form-item label="出生日期" required>
                    <el-date-picker type="date" v-model="editForm.date" style="width:100%"></el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="updataForm">确认修改</el-button>
            </div>
        </el-dialog>
       
</el-form>

    </div>
</template>

<script >
    export default {
        data(){
        return {
            tableData:[],
            options:[],
            formInline:[],
            // 要编辑的表单数据
            editForm:{},
            searchInput:'',

            // 控制表单是否显示
            dialogFormVisible:false,
            dialogAddForm:false,
            addForm:{
                    name:'',
                    address:[],
                    date:''
                }
            }
        },
        methods:{
            getTable(){
                this.$http.get('/api/table').then(res=>{
                    this.tableData=res.data.datas
                })
            },
            getTableList(list){
                this.tableList=list
            },
            getOptions(){
              this.$http.get('/api/options').then(res=>{
                if (res.status===200){
                this.options=res.data.datas
                } 
              })
            },
            handleEdit(index,row){
                this.editForm=Object.assign({},row)
                this.dialogFormVisible=true
            },
            updataForm(){
               // 点击确认修改后的 弹框
                this.$confirm('确定提交吗？','提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消'
                }).then(()=>{
                    // this.editForm=
                    this.tableData.some(item=>{
                        if (item.id===this.editForm.id) {
                            item.name=this.editForm.name
                            item.address=this.editForm.address
                            var data=this.editForm.date
                            // 把得到的日期修改格式 
                            item.date=[data.getFullYear(),(data.getMonth()+1),data.getDate()].join('-')
                        }
                        return
                    })
                    this.$message({
                        type:'success',
                        message:'修改成功！'
                    })
                    this.dialogFormVisible=false
                }).catch(()=>{

                })
            },
            // 删除
            handleDelete(index,row){
                this.$confirm('确定删除吗','提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消'
                }).then(()=>{
                    this.tableData.splice(index,1)
                    this.$message({
                        type:'success',
                        message:'删除成功！'
                    })
                })
            },
            // 当前页码改变时触发
            hanleCurrentChange(page){
                this.getTable()
            },
            getAddData(){
                this.dialogAddForm=true
            },
            postAddDate(){
                var toData=this.addForm.date
                this.addForm.date=[toData.getFullYear(),(toData.getMonth()+1),toData.getDate()].join('-')
                this.addForm.id=this.tableData.length
                this.tableData.unshift(this.addForm)
                this.dialogAddForm=false
                this.addForm={
                    name:'',
                    address:[],
                    date:''
                }
            },
        },
        created(){
            this.getTable()
            this.getOptions()
        },
        mounted(){
        },
        watch:{
            searchInput:function(){
                    if (this.searchInput) {
                        var arr=[]
                        this.tableData.forEach(item=>{
                            if ( item.name.indexOf(this.searchInput)>-1) {
                                arr.push(item)
                            }
                        })
                        return this.tableData=arr
                    }else{
                        this.getTable()
                    }
                    this.tableData=res.data.datas
                }
            }
        }
</script>

<style lang="" scpoed>
    .el-input__inner{
      width: 140px;
    }
    .el-pagination{
        text-align: center;
        margin-top: 10px;
    }
    .search{
        width: 140px;
        margin-right: 20px;
    }
    .top{
        margin-bottom: 10px;
    }

</style>